<template>
  <div>
      <van-nav-bar title="我的" fixed placeholder/>
      <div class="head">
          <div v-if="isLogin" class="info">
            <div class="userInfo" @click="lookInfo">
              <van-image
                round fit="cover"
                width="70"
                height="70"
                :src="'/tu'+userInfo.userIcon"
                />
                <div>
                    <div class="name">{{userInfo.userName}}<span class="grade"> V1</span></div>
                    <div class="bind comm">
                        查看个人信息<van-icon name="arrow" />
                    </div>
                </div>
          </div>
          <div class="sign" >
              <van-icon name="sign" size="30" @click="signIn"/>
          </div>
          </div>
          <div v-else>
              <!-- <span class="loginOrRejest" @click="login">登录/注册</span> -->
              <span class="loginOrRejest" @click="login">登录</span>
          </div>
      </div>
      <div class="toolicon">
        <van-row gutter="20">
            <van-col span="8"  v-for="(item,index) in toolInfo" :key="index" @click="enter(item.content)">
                <div class="toolnum">{{item.num}}</div>
                <div class="tooltext">{{item.content}}</div>
            </van-col>
        </van-row>
      </div>
      <!-- 我的订单 -->
      <div class="card">
          <van-cell title="我的订单" is-link  value="查看全部订单" @click="lookOrder"/>
          <van-row gutter="20" class="otools">
            <van-col span="4"  v-for="(item,index) in orderStatus" :key="index">
                <div><van-icon :name="item.vanIcon" size="25" /></div>
                <div class="tooltext">{{item.status}}</div>
            </van-col>
        </van-row>
      </div>
      <!-- 功能区 -->
      <div class="card">
          <van-cell title="必备工具" />
          <van-row gutter="20">
            <van-col span="6"  v-for="(item,index) in toolsAera" :key="index" @click="clickTools(item.name)">
                <div><van-icon :name="item.vanIcon" size="25" /></div>
                <div class="tooltext">{{item.name}}</div>
            </van-col>
        </van-row>
      </div>

      <!-- 推荐 -->
      <div class="tuijian">
          <h4>精选推荐</h4>
          <template v-for="v in adviceListArr">
            <van-card
                tag="团购"
                :price="v.goodsPrice"
                :desc="v.goodsDesc"
                :title="v.goodsName"
                :thumb="'tu/'+v.goodsImg"
          
                :key="v.goodsId"
            >
                <template #num>
                    <van-image
                            round
                            width="2rem"
                            height="2rem"
                            src="https://img01.yzcdn.cn/vant/cat.jpeg"
                    />
                    <van-image
                            round
                            width="2rem"
                            height="2rem"
                            src="https://img01.yzcdn.cn/vant/cat.jpeg"
                    />
                </template>
            </van-card>
      </template>
      </div>
  </div>
</template>

<script>
export default {
  name: "my",
  data(){
    return{
        isLogin:false,
        userInfo:{},
        userId:'',
        toolInfo:[
            {
                content:'收藏',
                num:0
            },
            
            {
                content:'优惠券',
                num:0
            },
            {
                content:'积分',
                num:0
            }
        ],
        orderStatus:[
            {
                vanIcon:'pending-payment',
                status:"待付款"
            },
            {
                vanIcon:'todo-list-o',
                status:"待发货"
            },
            {
                vanIcon:'logistics',
                status:"待收货"
            },
            {
                vanIcon:'records',
                status:"待评价"
            },
            {
                vanIcon:"share-o",
                status:"待分享"
            }
        ],
        toolsAera:[
            {
                vanIcon:'friends-o',
                name:"我的拼团"
            },
            {
                vanIcon:'location-o',
                name:"收货地址"
            },
            {
                vanIcon:'coupon-o',
                name:"领卷中心"
            },
            {
                vanIcon:'smile-comment-o',
                name:"我的评论"
            },
            {
                vanIcon:'question-o',
                name:"常见问题"
            },
            {
                vanIcon:'service-o',
                name:"客服"
            },
            {
                vanIcon:'after-sale',
                name:"退款售后"
            },
            {
                vanIcon:'setting-o',
                name:"设置"
            }
        ],
        adviceListArr:[
        {
            tag:"团购",
            price:"2.00",
            desc:"已拼536件",
            title:"商品标题",
            thumb:"https://img01.yzcdn.cn/vant/ipad.jpeg",
            origin_price:"10.00",
        },
        {
            tag:"团购",
            price:"2.00",
            desc:"已拼536件",
            title:"商品标题",
            thumb:"https://img01.yzcdn.cn/vant/ipad.jpeg",
            origin_price:"10.00",
        },
        {
            tag:"团购",
            price:"2.00",
            desc:"已拼536件",
            title:"商品标题",
            thumb:"https://img01.yzcdn.cn/vant/ipad.jpeg",
            origin_price:"10.00",
        },
        {
            tag:"团购",
            price:"2.00",
            desc:"已拼536件",
            title:"商品标题",
            thumb:"https://img01.yzcdn.cn/vant/ipad.jpeg",
            origin_price:"10.00",
        }
        ],
    }
  },
  created(){
    this.isLogin=sessionStorage.getItem('isLogin')
    // console.log(sessionStorage.getItem('user'))
    this.getGoodsData()
    if(this.isLogin){
        this.userId=JSON.parse(sessionStorage.getItem('user')).userId
        this.getUserInfo()
        this.getCoupon()
        this.getCollect()
    }
  },
 
  methods:{
      getGoodsData(){
          this.$axios.post('/api/marketGoods/heat').then(res=>{
              if(res.data.code==200){
                  this.adviceListArr=res.data.data
              }
          })
      },
      lookOrder(){
          if(this.isLogin){
              this.$router.push('/myorder')
          }else{
              this.$toast.fail('请先登录');
          }
      },
      getCollect(){
          this.$axios.post('/api/collection/list?userId='+this.userId).then(res=>{
            console.log(res)
            if(res.data.code==200){
               this.toolInfo[0].num=res.data.data==null?0:res.data.data.length
            }

        })
      },
      getUserInfo(){
           this.$axios.post('/api/user/userId?userId='+this.userId).then(res=>{
            // console.log(res)
            if(res.data.code==200){
                this.userInfo=res.data.data[0]
                // console.log(this.userInfo)
                // this.toolInfo[0].num=this.userInfo.collectionList==null?0:this.userInfo.collectionList.length
                // this.toolInfo[1].num=this.userInfo.coupon==null?0:this.userInfo.coupon.length
                this.toolInfo[2].num=this.userInfo.userPoints
            }
        })
        
      },
      getCoupon(){
          console.log(this.userId);
          this.$axios.post('/api/agoCoupon/userAll?userId='+this.userId).then(res=>{
            console.log(res)
            if(res.data.code==200){
               this.toolInfo[1].num=res.data.data.length
            }

        })
      },
      enter(v){
        //   console.log(v)
        if(this.isLogin){
            if(v=="收藏"){
                this.$router.push('/collection')
            }else if(v=='优惠券'){
                this.$router.push('/myCoupon')
            }
        }else{
            this.$toast.fail('请先登录');
        }
        
      },
      clickTools(v){
          if(this.isLogin){
              if(v=='我的拼团'){
                    this.$router.push('/myPintuan')
                }else if(v=='收货地址'){
                    this.$router.push('/addressPage')
                }else if(v=='领卷中心'){
                    this.$router.push('/shopping')
                }else if(v=='我的评论'){
                    this.$router.push('/evaluate')
                }else if(v=='常见问题'){
                    this.$router.push('/setup_content')
                }else if(v=='客服'){
                    this.$router.push('/customerService')
                }else if(v=='退款售后'){
                    this.$router.push('/refund')
                }else if(v=='设置'){
                    this.$router.push('/setup')
                }
            }
            else{
            this.$toast.fail('请先登录');
        }
      },
      signIn(){
        this.$axios.post('/api/sign/sign?userId='+this.userInfo.userId).then(res=>{
            console.log(res)
            if(res.data.code==200){
                this.$toast.success(res.data.msg+'+'+res.data.data);
            }else{
                this.$toast({
                    icon:'smile-o',
                    message:res.data.msg});
            }
            
        })
        
      },
      login(){
          this.$router.push('/login')
      },
      lookInfo(){
        this.$router.push('/userInfo')
      }
  }
}
</script>

<style scoped>

 div /deep/ .van-nav-bar__title{
    font-size: 18px;
    font-weight: 600;
}
.head{
    height: 130px;
}
.loginOrRejest{
    line-height: 130px;
    color: #FF6633;
    font-weight: 500;
    width: 100%;
    display: block;
    text-align: center;
}
.info{
    display: flex;
    padding: 0 30px;
    align-items: center;
    justify-content: space-between;
    align-content: space-between;
}
.userInfo{
    margin: 30px 0;
    display: flex;
    align-items: center;
}
.grade{
    height: 20px;
    width: 20px;
    color: goldenrod;
    margin-left: 0px;
}
.toolicon{
    padding: 0 15px;
    text-align: center;
    width: 90%;
    margin: auto;
}
.otools .van-col:first-child{
    margin-left: 22px;
}
.name{
    font-weight: 600;
}
.userInfo .van-image{
    margin-right: 10px;
}
.comm{
    color: #FF6633;
}
.bind{
    font-size: 12px;
    line-height: 30px;
}
.van-icon-arrow{
    vertical-align: middle;
}
.toolnum{
    color: #FF6633;
    font-size: 20px;
    font-weight: 600;
}
.tooltext{
    font-size: 12px;
    color: #333333;
}
.card{
    width: 90%;
    margin: 30px auto;
    /* height: 150px; */
    text-align: center;
    border: 1px solid #F3F4FF;
    box-shadow: 4px 3px 12px #F3F4FF;
    border-radius: 20px;
}
.card .van-col{
    padding-bottom: 30px;
}
.van-cell{
    border-radius: 20px 20px 0 0;
    border-bottom: 1px solid #ebedf0;;
}
.van-cell__title{
    font-size: 16px;
    font-weight: 600;
    text-align: left;
}
.van-cell__value{
    font-size: 12px;
    color: #999999;
}
.van-cell .van-cell__right-icon{
    font-size: 12px;
    color: #999999;
}
.card .van-row{
    margin-top: 20px;
}
.tuijian .van-image{
    margin-left: -10px;
}
.tuijian .van-card{
    width: 90%;
    margin: 8px auto;
}
.tuijian{
text-align: left;
margin-bottom: 50px;
}
h4{
text-align: left;
padding: 10px;
}
</style>